f@charset "utf-8"; /* common */ .radius {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} /* mainVisual */ #mainVisual {height: 550px;position: relative;top:0;z-index:1;overflow: hidden;margin-top: 106px;} #mainVisual .swiper-slide {height: 550px;background-repeat: no-repeat;background-position: 70%;-webkit-background-size: cover;background-size: cover;overflow: hidden;} #mainVisual .swiper-slide > span {position:absolute;top:0;width:100%;z-index:-1;overflow:hidden;} #mainVisual .swiper-slide > span img {max-width:100%;} /* #mainVisual .visual01 {background-image: url("../images/main/mainVisual01.jpg");} #mainVisual .visual02 {background-image: url("../images/main/mainVisual02.jpg");} #mainVisual .visual03 {background-image: url("../images/main/mainVisual03.jpg");} #mainVisual .visual04 {background-image: url("../images/main/mainVisual04.jpg");} #mainVisual .visual05 {background-image: url("../images/main/mainVisual05.jpg");} */ /* .mainVisualTxt span {display:block;background:rgba(0,0,0,0.5);width:440px;padding:50px 45px;} .mainVisualTxt span img {width:100%;} */ .mainVisualTxt {padding:50px 45px;background:rgba(0,0,0,0.5);width:440px;color:#fff;margin-top:50px;} .mainVisualTxt span {display:block;font-size:55px;line-height:1;padding-bottom:15px;border-bottom:1px solid #ff6300;font-weight:700;} .mainVisualTxt span strong {font-size:68px;} .mainVisualTxt p {font-size:17px;padding-top:15px;} /* controls */ #mainVisual .btnPrev {position: absolute; left:20px; top:50%; transform:translateY(-50%); color: #fff; text-align: center;z-index:2;} #mainVisual .btnNext {position: absolute; right:20px; top:50%; transform:translateY(-50%);color: #fff;text-align: center;z-index:2;} /* pager */ #mainVisual .pager {position: absolute; width: 100%; bottom:80px;text-align: center;font-size: 0;z-index:3;disp lay: none;} #mainVisual .swiper-pagination-bullet {border: 2px solid #fff;width: 16px;height: 16px;background: none;opacity: 1;} #mainVisual .swiper-pagination-bullet-active {border: 2px solid #fff;background: #fff;} /* mainContents */ #mainContents {background: #fafafa;} #mainContents section {padding: 50px 0;} #mainContents h2 {font-size:40px;color: #333; font-weight: 700; text-align: center;margin-bottom: 10px;line-height: 1;} #mainContents h2 strong {color: #9acd34;} #mainContents .titleDesc {font-size:16px;color: #808080; font-weight: 300; text-align: center;margin-bottom: 30px;} /* quickMenu */ #mainContents .quickMenu {padding: 0;margin-top: -65px;position: relative;z-index:5;} #mainContents .quickMenu .tab > li {float: left;} #mainContents .quickMenu .tab > li a {display: block;height: 65px ;line-height: 65px;font-size:20px ;background: rgba(0,0,0,0.6); text-align: center;color: #fff;width: 200px;position: relative;cursor:pointer;} #mainContents .quickMenu .tab > li a i {display: block;position: absolute; left:50%; top:45px;transform:translateX(-50%);display: none;} #mainContents .quickMenu .tab > li a:after {content: "";display: block;width: 1px;height: 100%;background: #6f6963;position: absolute; right:0;top:0;} #mainContents .quickMenu .tab > li.on a {background: #fff;color: #9acd34;} #mainContents .quickMenu .tab > li.on a i {display: block;} #mainContents .quickMenu .tabCon > li {position: relative;width: 100%;height: auto;background: #fff;} #mainContents .quickMenu .tabCon > li:first-child {display: block;} #mainContents .quickMenu .tabCon > li > div {padding: 32px 40px 40px;background: #fff;border: 1px solid #d9d9d9;border-top: none;overflow: hidden;height:228px;} #mainContents .quickMenu .tabCon > li > div .main {float: left;width: 60%;position:relative;} #mainContents .quickMenu .tabCon > li > div .main a:hover {text- decoration: underline;} #mainContents .quickMenu .tabCon > li > div .main .imgBox {float: left;} #mainContents .quickMenu .tabCon > li > div .main img {width:170px;height:145px;} #mainContents .quickMenu .tabCon > li > div .main .txtBox {height: 143px;padding: 0 70px 0 200px; font-size:15px ;color: #666;font-weight: 300;position: relative;} #mainContents .quickMenu .tabCon > li > div .main .txtBox .more {font-size: 16px;color: #faa61a;font-weight: 400;position: absolute; right:70px;top:154px;} #mainContents .quickMenu .tabCon > li > div .more i {position:relative;top:5px;} #mainContents .quickMenu .tabCon > li > div .main .txtBox .title {font-size: 22px;color: #333;margin-bottom: 10px;font-weight: 500;text-overflow:ellipsis; overflow: hidden;white-space:nowrap;} #mainContents .quickMenu .tabCon > li > div .main .txtBox .txt {line-height: 1.5em;height:4.5em ; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;overflow : hidden;text-overflow: ellipsis;} #mainContents .quickMenu .tabCon > li > div .main .faqTxtBox {hei ght: 143px;padding: 0 70px 0 0; font-size:15px ;color: #666;font-weight: 300;} #mainContents .quickMenu .tabCon > li > div .main > a div {padding-right:70px;} #mainContents .quickMenu .tabCon > li > div .main .quest {font-size:22px;color:#333;font-weight:500;display:inline-block;width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #mainContents .quickMenu .tabCon > li > div .main .faqTxtBox p {font-size:15px;color:#666;font-weight:300;margin-top:10px;} #mainContents .quickMenu .tabCon > li > div .main .faqTxtBox .more {font-size: 16px;color: #faa61a;font-weight: 400;position: absolute;top:154px;right:70px;} #mainContents .quickMenu .tabCon > li > div .main .toolbook {float:left;width:100%;position:relative;height:155px;} #mainContents .quickMenu .tabCon > li > div .main .toolbook02 {float:right;} #mainContents .quickMenu .tabCon > li > div .main .toolbook li {float:left;width:50%;} #mainContents .quickMenu .tabCon > li > div .main .toolbook img {width:100px;height:145px;border:1px solid #d9d9d9;} /* #mainContents .quickMenu .tabCon > li > div .main .toolbook li a span {float:left;width:110px;height:155px;display:block;} */ /* bak170308*/ #mainContents .quickMenu .tabCon > li > div .main .toolbook li a span {float:left;width:110px;height:155px;display:block;} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a .toolbookTxt {float:left;width:50%;} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a .toolbookTxt dt {font-size:17px;color:#f15922;font-weight:500;} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a .toolbookTxt dd {font-size:15px;color:#333;} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a .toolbookTxt p {font-size:14px;color:#666;font-weight:300;margin-top:3px;} #mainContents .quickMenu .tabCon > li > div .main .toolbook .more {right:15px;bottom:-30px;} #mainContents .quickMenu .tabCon > li > div .main .toolbook02 li a .toolbookTxt dt { line-height:1.5;height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;overflow:hidden; } #mainContents .quickMenu .tabCon > li > div .main .toolbook02 li a .toolbookTxt p { line-height:1.5;height:4.5em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-wrap:break-word;overflow:hidden; } #mainContents .quickMenu .tabCon > li.maintoolbook .main {position:relative;width:100%;} #mainContents .quickMenu .tab > li.maintoolbook > dl > dd .main:before {content:"";position:absolute;width:1px;height:160px;background:#d9d9d9;top:0;left:50%;} #mainContents .quickMenu .tab > li:nth-child(6) > dl > dd .main {width:100%;} #mainContents .quickMenu .tabCon > li > div .main .more {position:absolute;t op:154px;right:0;} #mainContents .quickMenu .tabCon > li > div .main .more a {font-size: 16px;color: #faa61a;font-weight: 400;} #mainContents .quickMenu .tabCon > li > div .listBox {float: left;width: 40%; font-size: 15px;color: #666;position:relative;} #mainContents .quickMenu .tabCon > li.download > div .listBox {width:48%;} #mainContents .quickMenu .tabCon > li.download > div .listBox:last-child {float: right;} #mainContents .quickMenu .tab > li.download > dl > dd .listBox {width:45%;} #mainContents .quickMenu .tabCon > li > div .listBox .more {position: absolute; right:0;top:154px;} #mainContents .quickMenu .tab > li.download > dl > dd .listBox .more {to p:154px;} #mainContents .quickMenu .tabCon > li > div .listBox .more a {font-size: 16px;color: #faa61a;font-weight: 400;} #mainContents .quickMenu .tabCon > li > div .listBox li {background: url("../images/main/bulletList.png") no-repeat 0 50%;font-weight: 300;padding: 8px 0 8px 10px;overflow: hidden;border-bottom:1px dashed #d9d9d9;} #mainContents .quickMenu .tabCon > li > div .listBox li:last-child {border-bottom:0px dashed #d9d9d9;} #mainContents .quickMenu .tab > li.download > dl > dd .listBox li {padding:8px 0 8px 10px} #mainContents .quickMenu .tab > li.mainFaq > dl > dd .listBox li {padding:8px 0 8px 10px} #mainContents .quickMenu .tabCon > li.mainFaq > div .listBox li a {width:95%;} #mainContents .quickMenu .tabCon > li > div .listBox li a {float: left; overflow: hidden;text-overflow:ellipsis; white-space:nowrap;width: 70%;} #mainContents .quickMenu .tabCon > li > div .listBox li .date {float: right;width: 30%; text-align: right;} #mainContents .quickMenu .tabCon > li > div .list {float:left;} #mainContents .quickMenu .tabCon > li.openEdu > div .listBox li a {width:50%;} #mainContents .quickMenu .tabCon > li.openEdu > div .listBox li .date {width:50%;text-align:right;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01:before {content:"";position:absolute;top:0;right:-7px;width:1px;height:145px;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01 li {float:left;width:12.5%;margin-left:2%;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01 li:nth-child(2) {margin-left:0;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01 li a span {width:100%;height:auto;display:block;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01 li a span img {width:100%;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01 li a .toolbookTxt {float:left;width:100%;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01 img {height:118px;} /* program */ #mainContents .program {position:relative;} #mainContents .program .programList .swiper-slide {width: 285px;position: relative;} #mainContents .program .programList .swiper-slide a {display: block;background: #fff; position: relative;overflow: hidden; border: 3px solid #fafafa; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #mainContents .program .programList .swiper-slide .imgBox {display: block;position: relative;} #mainContents .program .programList .swiper-slide .imgBox img {width: 100%;} #mainContents .program .programList .swiper-slide .txtBox {padding: 20px 15px 20px;min-height: 90px; border: 1px solid #d9d9d9; -webkit-border-radius: 0 0 10px 10px ; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; } #mainContents .program .programList .swiper-slide .txtBox dt {font-size:20px;margin-bottom: 10px;font-weight: 500;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:2 ; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.2em;height: 1.3em; } #mainContents .program .programList .swiper-slide .txtBox dd {font-size:14px ;color: #808080;font-weight: 300;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:3 ; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.4em;height: 4.2em;} #mainContents .program .programList .swiper-slide .direct {position: absolute; bottom:30px; left:15px;font-size: 14px;color: #808080;} #mainContents .program .programList .swiper-slide .direct i {position:relative;top:3px;left:3px;} #mainContents .program .programList .swiper-slide .imgBox .cover {position: absolute;width: 100%;height: 100%;left:0; top:0;overflow: hidden;background:url("../images/main/iconZoom.png") no-repeat 50% rgba(154,205,52,0.75);display: none;} #mainContents .program .programList .swiper-slide a:hover {border-color:#9acd34;} #mainContents .program .programList .swiper-slide a:hover .txtBox {border-color: transparent;} #mainContents .program .programList .swiper-slide a:hover .txtBox dt {color: #9acd34;} #mainContents .program .programList .swiper-slide a:hover .txtBox dd {text-decoration: underline;} #mainContents .program .programList .swiper-slide a:hover .cover {display: block;} #mainContents .program .btnPrev {position: absolute; left:-50px; top:50%; transform:translateY(-50%); z-index:99; font-size: 80px;line-height: 0;} #mainContents .program .btnNext {position: absolute; right:-50px; top:50%; transform:translateY(-50%);z-index:99; font-size: 80px;line-height: 0;} #mainContents .program .programWrap {overflow: hidden;} #mainContents .program02 {background: #fff;} #mainContents .program02 .programList .swiper-slide a {border-color:#fff;} #mainContents .program .pager {text-align:center;margin-top:10px;} #mainContents .program .pager span {display:inline-block;width:10px;height:10px;bo rder:1px solid #ccc;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;backg round-color:#d9d9d9;margin-right:3px;} /* edu */ #mainContents .education {background: url("../images/main/bgEduApplication.jpg") 50% 0;-webkit-background-size: cover;background-size: cover;} #mainContents .education fieldset {width: 1000px;margin: 30px auto 0;} #mainContents .education fieldset .inputWrap {overflow: hidden;} #mainContents .education fieldset ul {width: 480px;float: left;margin-left: 40px;} #mainContents .education fieldset ul li {overflow: hidden;margin:10px 0 ;} #mainContents .education fieldset ul li dt {float: left;width: 25%;font-size: 18px;line-height: 38px;padding-left: 10px;background: url("../images/main/bulletList.png") no-repeat 0 50%;color: #333; font-weight: 500;} #mainContents .education fieldset ul li dd {float: left;width: 75%;} #mainContents .education fieldset ul li dd.paymentCheck {line-height: 36px;} #mainContents .education fieldset ul li dd select {width: 100%;height: 38px;border: 1px solid #ccc;} #mainContents .education fieldset ul li dd input[type="text"] {width: 100%;height: 38px;border: 1px solid #ccc;} #mainContents .education fieldset ul li.email input[type="text"] {width: 47%;display: inline-block; float: left;} #mainContents .education fieldset ul li.email select {width: 47%;display: inline-block;float: left;} #mainContents .education fieldset ul li.email .dir {width: 6%;display: inline-block;float: left;line-height: 38px;text-align: center;} #mainContents .education fieldset ul li.tel select {width:30% ;display: inline-block;float: left;} #mainContents .education fieldset ul li.tel input[type="text"] {width:30% ;display: inline-block;float: left;} #mainContents .education fieldset ul li.tel .dir {width: 5%;display: inline-block;float: left;line-height: 38px;text-align: center;} #mainContents .education fieldset .privacyDesc {clear: both;text-align: center;margin-top: 30px;color: #333;} #mainContents .education fieldset .privacyDesc a {font-size: 16px;color: #f15922;display: inline-block;margin-left: 10px;vertical-align: middle;font-weight: 500;} #mainContents .education fieldset .privacyDesc a i {} #mainContents .btns {text-align: center;margin-top: 20px;} #mainContents .btns a {display: inline-block;width: 320px;height: 50px;line-height: 50px;font-size: 20px;font-weight: 400;background: #faa61a;margin:2px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #mainContents .btns a:hover {background: #f2711b;} input[type="checkbox"] {position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;} input[type="checkbox"] + label {padding-left:34px;height:30px; display:inline-block;line-height:30px;background-repeat:no-repeat;background-position: 0 0;font-size:16px;vertical-align:middle;cursor:pointer;background: url("../images/main/unchecked.png") no-repeat;} input[type="checkbox"]:checked + label {background: url("../images/main/checked.png") no-repeat;height:30px; } #friend {margin-top:10px;display:block;} #privacyCheckWrap {position:fixed;width:640px;height:500px;top:50%;margin-top:-250px;left:50%;margin-left:-320px;background:#fff;border:2px solid #ccc;display:none;z-index:999;} #privacyCheckWrap .popupTop {text-align:center;background:#f3f3f3;padding:10px 0;} #privacyCheckWrap span.title {font-size:20px;} #privacyCheckWrap > div {position:relative;} #privacyCheckWrap .btnClose {position:absolute;display:block;top:15px;right:15px;width:20px;} #privacyCheckWrap .btnClose img {width:100%;} #privacyCheckWrap .agreementWrap {padding:20px;height:447px;overflow-y:scroll;line-height:17px;} #privacyCheckWrap .agreementWrap span.title,#newsletter_application_popup .privacy_agree .txtBox > span {display:block;font-size:18px;color:#333;font-weight:bold;} #privacyCheckWrap .agreementWrap .agreementContent {font-family:"dotum";} #privacyCheckWrap .agreementWrap .agreementContent p {font-size:14px;color:#666;} #privacyCheckWrap .agreementWrap .agreementContent a {position:relative;top:2px;} @media screen and (max-width:1400px) { #mainVisual .btnPrev {display:none;} #mainVisual .btnNext {display:none;} .programWrap .btnPrev {display:none;} .programWrap .btnNext {display:none;} } @media screen and (max-width:1200px) { #mainVisual {margin-top: 167px;} #mainContents .quickMenu .tab > li {width: 16.66%;} #mainContents .quickMenu .tab > li a {width: 100%;} #mainContents .program .btnPrev { left:0px;padding: 10px 20px;color: #fff;background: rgba(0,0,0,0.2);} #mainContents .program .btnNext { right:0px;padding: 10px 20px;color: #fff;background: rgba(0,0,0,0.2);} #mainContents .quickMenu .tabCon > li > div {height:auto;} #mainContents .quickMenu .tabCon > li > div .listBox .more {top:auto;} #mainContents .quickMenu .tabCon > li > div .main .more {top:auto;} #mainContents .quickMenu .tabCon > li > div .main .toolbook {height:auto;} #mainContents .quickMenu .tabCon > li > div .main .toolbook02 li a .toolbookTxt {width:47%;} } @media screen and (max-width:980px) { #mainVisual {height: 315px;margin-top: 60px;} #mainVisual .swiper-slide {height: 315px;} #mainContents section {padding: 30px 0;} #mainContents h2 {font-size:24px; margin-bottom:15px} #mainContents .quickMenu {margin-top: -50px;} #mainContents .quickMenu .tabCon > li > div .main .more {top:auto;bottom:-8px;} .mainVisualTxt {padding:18px 20px;margin-top:20px;} .mainVisualTxt {width:261px;} .mainVisualTxt span {font-size:28px;width:100%;} .mainVisualTxt span strong {font-size:32px;} .mainVisualTxt > p {font-size:11px;} #mainContents .quickMenu .tabCon > li.openEdu > div .listBox li .date #mainContents .quickMenu {margin-top: -100px;} #mainContents .quickMenu .tab > li {width: 33.33%;} #mainContents .quickMenu .tab > li a {height: 50px;line-height: 50px;} #mainContents .quickMenu .tab > li a:before {content: "";display: block;width: 100%;height: 1px;background: #6f6963;position: absolute; bottom:0;left:0;} #mainContents .quickMenu .tabCon > li > div {top:100px;height: auto;} #mainContents .quickMenu .tabCon > li > div .main {float: none;width: 100%;} #mainContents .quickMenu .tabCon > li > div .main a {display: block;} #mainContents .quickMenu .tabCon > li > div .main .txtBox {padding-right: 0;} #mainContents .quickMenu .tabCon > li > div .listBox {float: none;width: 100%;margin-top: 20px;} #mainContents .quickMenu .tabCon > li.download > div .listBox {float: left;} #mainContents .quickMenu .tabCon > li.download > div .listBox:last-child {float: right;} #mainContents .quickMenu .tab > li.download > dl > dd .listBox {width:100%;} #mainContents .quickMenu .tab > li.download > dl > dd .listBox li:last-child {border-bottom:1px dashed #d9d9d9;} #mainContents .quickMenu .tab > li.download > dl > dd .listBox:last-child li:last-child {border-bottom:0;} #mainContents .quickMenu .tab > li.mainFaq > dl > dd .listBox li:last-child {border-bottom:1px dashed #d9d9d9;} #mainContents .quickMenu .tab > li.mainFaq > dl > dd .listBox:last-child li:last-child {border-bottom:0;} #mainContents .quickMenu .tabCon > li > div .list {margin-top:0;} #mainContents .quickMenu .tabCon > li > div .list ul {padding-bottom:0;} #mainContents .quickMenu .tabCon > li > div .main .txtBox .more {top:120px;right: 0;} #mainContents .quickMenu .tabCon > li > div .main .toolbook {width:100%;margin-bottom:50px;} #mainContents .quickMenu .tabCon > li > div .main .toolbook li {margin-bottom:20px;} #mainContents .quickMenu .tabCon > li > div .main .quest {width:auto;display:inline;white-space:normal;} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a span {} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a span img {width:100%;} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a .toolbookTxt {margin-left: 0;} #mainContents .quickMenu .tabCon > li > div .main .toolbook02 li a .toolbookTxt {margin-left: 15px;} #mainContents .quickMenu .tab > li a i {top: 30px;} #mainContents .quickMenu .tabCon > li > div .main .faqTxtBox {padding-right:0;position: relative;} #mainContents .quickMenu .tabCon > li > div .main > a > div {padding-right:0;} #mainContents .quickMenu .tabCon > li > div .main .faqTxtBox .more {right: 0;bottom:-32px;top:auto;} #mainContents .quickMenu .tabCon > li > div .listBox > ul {padding-bottom:30px;} #mainContents .quickMenu .tab > li.download > dl > dd .listBox > ul {padding-bottom:0;} #mainContents .quickMenu .tab > li.download > dl > dd .listBox:last-child > ul {padding-bottom:30px;} #mainContents .quickMenu .tabCon > li > div .listBox .more {bottom:0;} #mainContents .quickMenu .tabCon > li > div .main .faqTxtBox p {padding-right:0;} #mainContents .quickMenu .tabCon > li.mainFaq .listBox {margin-top:43px;} #mainContents .quickMenu .tab > li.maintoolbook > dl > dd .main:before {display:none;} #mainContents .program {padding: 50px 30px;} #mainContents .education fieldset {width: 100%;} #mainContents .education .inputWrap {padding: 0 10px;} #mainContents .education .inputWrap ul {float: none;margin-left: 0;width: 100%;} #mainContents .program .btns a {width: 32%;font-size:18px;} #mainContents .quickMenu .tabCon > li.openEdu > div .listBox li a {width:50%;} #mainContents .quickMenu .tabCon > li.openEdu > div .listBox li .date {float:right;width:50%; text-align: right;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01:before {display: none;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01 li {width: 32%;} #mainContents .program .btnPrev {display: none;} #mainContents .program .btnNext {display: none;} } @media screen and (max-width:768px) { #mainVisual .pager {bottom: 110px;} #mainVisual .btnPrev {left:15px;} #mainVisual .btnNext {right:15px;} #mainVisual .btnPrev img {width: 50px;height: 50px;} #mainVisual .btnNext img {width: 50px;height: 50px;} #mainVisual li p .main {font-size: 28px;padding-top:50px;} #mainVisual li p .sub {font-size: 15px; padding:5px 30px 0; display:none;} #mainContents .quickMenu {margin-top: -100px;} #mainContents .quickMenu .tabCon > li > div {padding: 10px;} #mainContents .quickMenu .tabCon > li > div .txtBox {} #mainContents .program {padding: 30px 10px;} #mainContents .program .btnPrev { left:-10px;font-size: 50px;} #mainContents .program .btnNext { right:-10px;font-size: 50px;} #privacyCheckWrap {width:100%;height:100%;top:0;left:0;margin-top:0;margin-left:0;overflow-y:scroll;} #privacyCheckWrap .agreementWrap {height:85%;} } @media screen and (max-width:640px) { #mainVisual .visual02 {background-position:70% 0;} #mainVisual .visual03 {background-position:60% 0;} #mainVisual {height: 350px;margin-top: 60px;} #mainVisual .swiper-slide {height: 350px;} #mainContents .quickMenu .tab > li a {font-size: 16px;} #mainContents .quickMenu .tabCon > li > div .main .imgBox {width: 120px;} #mainContents .quickMenu .tabCon > li > div .main .imgBox img {width: 100%;} #mainContents .quickMenu .tabCon > li > div .main .txtBox {padding-left: 140px;} #mainContents .quickMenu .tabCon > li > div .main .txtBox .title {font-size: 18px;} #mainContents .quickMenu .tabCon > li > div .main .txtBox .more {top:110px;} #mainContents .quickMenu .tabCon > li > div .main .toolbook {float:none;text-align:center;} #mainContents .quickMenu .tabCon > li > div .main .toolbook .more {bottom: 0;} #mainContents .quickMenu .tabCon > li > div .main .toolbook02 {text-align: left;margin-bottom: 0;} #mainContents .quickMenu .tabCon > li > div .main .toolbook02 .more {bottom:0;} #mainContents .quickMenu .tabCon > li > div .main .toolbook02 li {float: none;width: 100%;overflow: hidden;} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a span {fl oat:none;display:block;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01 li a span img {height:auto;} #mainContents .quickMenu .tabCon > li > div .main .toolbook02 li a span img {width: auto;} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a .toolbookTxt {} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a .toolbookTxt p {} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a .toolbookTxt dt {font-size:16px;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01 li a .toolbookTxt dt {font-size:14px;} #mainContents .quickMenu .tabCon > li > div .main .toolbook li a .toolbookTxt dd {font-size:12px;} #mainContents .quickMenu .tabCon > li > div .main .more {bottom:-5px;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01 .more {bottom:-10px;} #mainContents .education .inputWrap dt {width: 25%;font-size: 16px;} #mainContents .education .inputWrap dd {width: 75%;} /* #mainContents .quickMenu .tabCon > li > div .main .txtBox .txt {height: 60px;} */ #mainContents .program .btns a {width: 100%;} #mainContents .education .btns {padding: 0 10px;} #mainContents .education .btns a {width: 100%;} #mainContents .quickMenu .tabCon > li > div .main .toolbook02 li a .toolbookTxt {width:64%;} #mainContents .quickMenu .tabCon > li > div .main .toolbook02 li a span {width:auto;height:auto;} .mainVisualTxt {padding:10px;margin-top:20px;} .mainVisualTxt {width:200px;} .mainVisualTxt span {font-size:18px;width:100%;} .mainVisualTxt span strong {font-size:24px;} .mainVisualTxt > p {font-size:11px;} .mainVisualTxt > p br {content: "";} } @media screen and (max-width:430px) { #mainContents .program .programList .swiper-slide {} #mainContents .quickMenu .tabCon > li > div {padding-bottom: 40px;} #mainContents .quickMenu .tabCon > li.download > div .listBox {float: none;width: 100%;margin-top: 0;} #mainContents .quickMenu .tabCon > li.download > div .listBox:last-child {float: none;} #mainContents .quickMenu .tabCon > li > div .listBox .more {bottom: -30px;} #mainContents .quickMenu .tabCon > li > div .listBox li:last-child {border-bottom:1px dashed #d9d9d9;} #mainContents .quickMenu .tabCon > li > div .listBox > ul {padding-bottom: 0;} #mainContents .quickMenu .tabCon > li.openEdu > div .listBox li .date {dis play: none;} #mainContents .quickMenu .tabCon > li.maintoolbook > div {padding-bottom: 20px;} #mainContents .quickMenu .tabCon > li > div .main .toolbook01 {padding-bottom: 20px;margin-bottom: 20px;} }.page20{width:100%;text-align:center;margin-top:30px} .page20 a{position:relative;display:inline-block;font-size:14px; font-family:Arial, Helvetica, sans-serif;font-weight:700;height:40px;width:40px;line-height:50px;text-align:center;color:#94744c;background:transparent;border-radius:5px;border:1px solid #eae0d9;z-index:1;transition:all 500ms ease} .page20 a:hover,.page20 a.page-num-current{background-color:#fd1400;border-color:#e41700;color:#fff} .digg4{padding:10px;margin:10px;text-align:center;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:20px;line-height:20px} .digg4 a,.digg4 span.miy{margin:2px;text-decoration:none} .digg4 .disabledfy{font-family:Tahoma,Verdana} .metpager_9 a,.metpager_9 span.miy{border:1px solid #f8f8f8;padding:5px 10px 5px 10px;color:#a1a0a0;border-radius:5px;font-size:14px;} .metpager_9 a.page-num-current{background-color:#fd1400;color:#fff} .metpager_9 a:hover{border:1px solid #fd1400;color:#fff;background-color:#fd1400} .metpager_9 a:hover{border:1px solid #fd1400;color:#fff;background-color:#fd1400} .metpager_9 span.current{border:1px solid #fd1400;padding:2px 5px 2px 5px;margin:2px;color:#fff;background-color:#fd1400;text-decoration:none} .metpager_9 span.disabled{border:1px solid #fd1400;padding:2px 5px 2px 5px;margin:2px;color:#ccc}